<template>
  <div class="room-list">
    <Calendar
      @confirm="handleConfirm"
      :dDate="{
        startDate: hotelSearch.searchInfo.startDate,
        endDate: hotelSearch.searchInfo.endDate,
      }"
    >
      <div class="date active" @click="dateDialogChange(true)">
        <div class="item">
          <span>{{ showDate.startDateShort }}</span>
          <div class="text">{{ showDate.startDateText }}入住</div>
        </div>
        <div class="item middle">共{{ showDate.roomNight }}晚</div>
        <div class="item">
          <span>{{ showDate.endDateShort }}</span>
          <div class="text">
            <span>{{ showDate.endDateText }}离开</span>
            <span class="i-carbon-chevron-right"></span>
          </div>
        </div>
      </div>
    </Calendar>

    <div class="room">
      <div
        class="room-item bd"
        :class="{
          disabled: hotel.emptyRoomNum === 0,
        }"
      >
        <div class="img">
          <image :src="hotelImgs[0]" mode="aspectFill" />
        </div>
        <div class="room-info">
          <div class="top">
            <div class="name">{{ hotel.name }}</div>
            <div class="spec">{{ hotel.remark }}</div>
            <div class="status">{{ hotel.cancelRule }}</div>
            <div class="status">立即确认</div>
          </div>
          <div class="bottom">
            <span></span>
            <div class="price-btn">
              <div class="price">{{ hotel.price }}</div>
              <div class="btn active" @click="placeOrde(hotel)">预定</div>
            </div>
          </div>
        </div>
      </div>
      <div class="title" v-if="hotel.otherLayoutList.length > 0">其他房型</div>
      <div
        class="room-item"
        v-for="(item, index) in hotel.otherLayoutList"
        :key="index"
        :class="{
          disabled: item.emptyRoomNum === 0,
        }"
        @click="to('/pages-sub/hotel/detail/index', { id: item.id })"
      >
        <div class="img">
          <image :src="item.imgUrls[0]" mode="aspectFill" />
        </div>
        <div class="room-info">
          <div class="top">
            <div class="name">{{ item.name }}</div>
            <div class="spec">{{ item.remark }}</div>
          </div>
          <div class="bottom">
            <span></span>
            <div class="price-btn">
              <div class="price">{{ item.price }}</div>
              <div class="btn" @click.stop="placeOrde(item)">预定</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useHotelSearch } from '@/store/hotelSearch'
import dayjs from 'dayjs'
import { to } from '@/utils/page'
defineOptions({ name: 'RoomList' })

const hotelSearch = useHotelSearch()
const props = defineProps(['hotel'])
const emits = defineEmits(['dateDialogState', 'placeOrde', 'dateChange'])

const hotelImgs = ref([])
if (props.hotel.imgUrls) {
  hotelImgs.value = props.hotel.imgUrls.split(',')
}
props.hotel.otherLayoutList.forEach((item) => {
  item.imgUrls = item.imgUrls.split(',')
})

const showDate = reactive({
  startDate: '',
  endDate: '',
  roomNight: '',
  startDateShort: '',
  endDateShort: '',
  startDateText: '',
  endDateText: '',
})

// 日期确认
function handleConfirm(dateInfo) {
  showDate.startDate = dateInfo.startDate
  showDate.endDate = dateInfo.endDate
  showDate.startDateText = dateInfo.startDateText
  showDate.endDateText = dateInfo.endDateText
  showDate.roomNight = dateInfo.roomNight
  showDate.startDateShort = dayjs(dateInfo.startDate).format('MM月DD日')
  showDate.endDateShort = dayjs(dateInfo.endDate).format('MM月DD日')
  dateDialogChange(false)
  if (
    dateInfo.startDate !== hotelSearch.searchInfo.startDate ||
    dateInfo.endDate !== hotelSearch.searchInfo.endDate
  ) {
    hotelSearch.setSearchInfo({
      startDate: dateInfo.startDate,
      endDate: dateInfo.endDate,
    })
    emits('dateChange')
  }
}

// 关闭日期选择
const dateDialogStatus = ref(false)
function dateDialogChange(state) {
  dateDialogStatus.value = state
  emits('dateDialogState', dateDialogStatus.value)
}

function placeOrde(hotel) {
  emits('placeOrde', hotel)
}
</script>
<style lang="scss" scoped>
.room-list {
  margin: -30rpx 30rpx 0rpx;
  background-color: #fff;
  border-radius: 30rpx;
  .date {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 112rpx;
    margin: 0 24rpx;
    border-bottom: 1px solid #e6ecf0;
    .item {
      display: flex;
      align-items: center;
      font-size: 30rpx;
      font-weight: 700;
      color: var(--color1);
      .text {
        display: inline-flex;
        align-items: center;
        margin-left: 6rpx;
        font-size: 25rpx;
        font-weight: 500;
        line-height: 1;
        color: var(--color4);
        span {
          line-height: 1;
        }
      }
    }
    .middle {
      display: flex;
      flex: 1;
      justify-content: center;
      font-size: 27rpx;
      font-weight: 500;
      text-align: center;
    }
  }

  .room {
    .title {
      display: flex;
      align-items: center;
      height: 112rpx;
      padding-left: 23rpx;
      font-size: 30rpx;
      font-weight: 700;
      &::before {
        display: inline-block;
        width: 12rpx;
        height: 38rpx;
        margin-right: 16rpx;
        content: '';
        background-color: var(--color1);
        border-radius: 6rpx;
      }
    }
  }
  .room-item {
    display: flex;
    padding: 26rpx;
    &.bd {
      @include border-bottom(#e6ecf0);
    }
    .img {
      width: 158rpx;
      height: 212rpx;
      overflow: hidden;
      background-color: var(--bgc1);
      border-radius: 23rpx;
      image {
        width: 100%;
        height: 100%;
        border-radius: 23rpx;
      }
    }
    .room-info {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-between;
      width: 0;
      margin-left: 14rpx;
      .name {
        font-size: 27rpx;
        font-weight: 600;
        line-height: 32rpx;
        color: var(--color1);
        @include text-clamp(1);
      }
      .spec {
        margin-top: 4rpx;
        font-size: 24rpx;
        line-height: 30rpx;
        color: var(--color4);
      }
      .status {
        margin-top: 2rpx;
        font-size: 24rpx;
        line-height: 30rpx;
        color: var(--sc4);
      }
      .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .full {
          font-size: 23rpx;
          line-height: 38rpx;
          color: var(--sc2);
        }
        .price-btn {
          display: flex;
          align-items: center;
          .price {
            margin-right: 4rpx;
            font-size: 38rpx;
            font-weight: 700;
            line-height: 45rpx;
            &::before {
              font-size: 23rpx;
              font-weight: 600;
              line-height: 45rpx;
              content: '￥';
            }
          }
          .btn {
            width: 108rpx;
            height: 73rpx;
            font-size: 27rpx;
            line-height: 73rpx;
            color: #fff;
            text-align: center;
            background: var(--color1);
            border-radius: 14rpx;
          }
        }
      }
    }
    &.disabled {
      .name,
      .spec,
      .status,
      .price-btn {
        color: var(--color4) !important;
      }
      /* stylelint-disable-next-line no-descending-specificity */
      .btn {
        background-color: var(--color4) !important;
      }
    }
  }
}
</style>
